<template>
  <div>
    <el-container>
      <el-header class="divhead">
        <el-input class="divinput" v-model="keyword" placeholder="请输入要查找的内容"></el-input>
        <el-button class="divbuttonleft" type="primary" @click="search(keyword)">查 找</el-button>
        <el-button class="divbuttonright" type="primary" @click="add">添加信息</el-button>
        <el-button class="divbuttonright" type="primary" @click="downExcel">下载数据</el-button>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: ""
    };
  },
  methods: {
    add() {
      this.$router.push("/index_manager/addvisitor");
    },
    search(keyword) {
      console.log("传值前的keyword" + keyword);
      this.$router.push({
        path: "/index_manager/util",
        query: {
          keyword: keyword,
          tage: "visitor"
        }
      });
    },
    downExcel() {
      this.axios
        .get("excel/getvisitorexcel", { responseType: 'blob' })
        .then(function(response) {
          var blob = new Blob([response.data]);
          var downloadElement = document.createElement("a");
          var href = window.URL.createObjectURL(blob); //创建下载的链接
          downloadElement.href = href;
          downloadElement.download = "访客数据.xlsx"; //下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(href); //释放掉blob对象

          console.log(response);
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  },
  components: {}
};
</script>

<style scoped>
.divhead {
  background-color: rgb(255, 255, 255);
  /* border: solid 1 px #ff561f; */
}
.divinput {
  width: 200px;
  position: relative;
  left: -350px;
}
.divbuttonleft {
  position: relative;
  left: -340px;
}
.divbuttonright {
  position: relative;
  right: -390px;
}
</style>
